<!--
* bootstrap-fileinput v5.2.7
* http://plugins.krajee.com/file-input
*
* Author: Kartik Visweswaran
* Copyright: 2014 - 2021, Kartik Visweswaran, Krajee.com
*
* Licensed under the BSD-3-Clause
* https://github.com/kartik-v/bootstrap-fileinput/blob/master/LICENSE.md
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Krajee JQuery Plugins - Bootstrap 5.x - &copy; Kartik</title>
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/styles.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.min.css" crossorigin="anonymous">
    <link href="../css/fileinput.css" media="all" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" crossorigin="anonymous">
    <link href="../themes/explorer-fas/theme.css" media="all" rel="stylesheet" type="text/css"/>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script>
    <script src="../js/plugins/piexif.js" type="text/javascript"></script>
    <script src="../js/plugins/sortable.js" type="text/javascript"></script>
</head>
<body>
    <nav class="navbar navbar-light navbar-expand-md" style="background: var(--bs-white);">
        <div class="container-fluid">
            <a class="navbar-brand" href="#"></a><img id="wangzhantubiao" src="https://www.acagrid.com/static/application/src/images/acagrid.png"><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-1"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
            <div class="collapse navbar-collapse" id="navcol-1">
                <ul class="navbar-nav">
                    <li class="nav-item" id="shouyebtn"><a class="nav-link active" href="#">首页</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">成果管理</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">课题管理</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">学术助手</a></li>
                </ul><button class="btn btn-primary btn btn-outline-primary" id="shangchuanxinzeng" type="button">上传新增</button>
                <div class="dropdown">
                    <a class="dropdown-toggle" aria-expanded="false" data-bs-toggle="dropdown" href="#" style="margin-left: 153px;"><img src="https://img.okay.do/acagrid/static/images/default/avatar_200.png" style="max-height: 39px;"></a>
                    <div class="dropdown-menu"><a class="dropdown-item" href="#">First Item</a><a class="dropdown-item" href="#">Second Item</a><a class="dropdown-item" href="#">Third Item</a></div>
                </div>
            </div>
        </div>
    </nav>
    <div class="container">
        <div class="row">
            <div class="col-md-2"><label class="col-form-label">Label</label></div>
            <div class="col-md-6"><input type="text" id="account"></div>
        </div>
    </div>
    <div class="container my-4">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
        <script src="../js/fileinput.js" type="text/javascript"></script>
        <script src="../js/locales/zh.js" type="text/javascript"></script>
        <script src="../themes/fas/theme.js" type="text/javascript"></script>
        <script src="../themes/explorer-fas/theme.js" type="text/javascript"></script>
        <h1>上传文件</h1>
        <hr>
        <form enctype="multipart/form-data">
            <div class="file-loading">
                <input id="model_file" name="model_file" type="file" multiple>
            </div>
        </form>
        <script>

            $(function () {
                var control = $("#model_file");
                var name =$("#account")
                var uploadrul = "upload.ashx";//处理文件的url
                var upObj = {
                    language: 'zh', //设置语言
                    uploadUrl: uploadrul, //上传的地址
                    uploadExtraData: { "savepath": "/upload/", "username": name },//上传至服务器的参数，非常重要
                    allowedFileExtensions: ['xml', 'pdf', 'jpg', 'png', 'gif', 'rar', 'doc'],//接收的文件后缀
                    showUpload: true, //显示批量上传按钮
                    showCaption: false,//是否显示标题
                    dropZoneEnabled: true,//是否显示拖拽区域
                    browseClass: "btn btn-primary",                        // 浏览按钮样式
                    uploadClass: "btn btn-primary",                        // 上传按钮样式
                    maxFileSize: 4096,//单位为kb，如果为0表示不限制文件大小
                    hideThumbnailContent: false,                  // 是否隐藏文件内容
                    minFileCount: 1,
                    maxFileCount: 10,
                    msgSizeTooLarge: " \"{name}\" 大小为({size} KB) 最大文件大小为 {maxSize} KB.请重新上传!",//文件的实际大小有些许偏差
                    enctype: 'multipart/form-data',
                    validateInitialCount: true,
                    previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
                    msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
                    allowedPreviewTypes: ['image', 'pdf'],//能够预览的文件类型，如果不限制。文件预览时可能很慢
                    fileActionSettings: {                               // 在预览窗口中为新选择的文件缩略图设置文件操作的对象配置
                        showRemove: true,                                   // 显示删除按钮
                        showUpload: true,                                   // 显示上传按钮
                        showDownload: false,                            // 显示下载按钮
                        showZoom: true,                                    // 显示预览按钮
                        showDrag: false,                                        // 显示拖拽
                        removeIcon: '<i class="fa fa-trash"></i>',   // 删除图标
                        uploadIcon: '<i class="fa fa-upload"></i>',     // 上传图标
                        uploadRetryIcon: '<i class="fa fa-repeat"></i>'  // 重试图标
                    },
                };
                $('#modalShow').html("[请选择" + upObj.allowedFileExtensions + "]文件");
                control.fileinput(upObj);

                //导入文件上传成功之后的事件
                $("#model_file").on("fileuploaded", function (event, data, previewId, index) {

                });
                //导入文件上传失败之后的事件
                $('#model_file').on('fileuploaderror', function (event, data, msg) {
                    var msg = data.response;
                });
            });
        </script>
</body>


</html>